<template>
  <div class="flex flex-col min-h-screen">
    <Header class="h-[50px]" />
    <!-- Main 自动撑开，footer 会自动被推到底部 -->
    <main v-if="!noDisplayComponent" class="flex-1 mb-8">
      <router-view />
    </main>
    <main v-else class="flex-1">
      <router-view />
    </main>
    <template v-if="!noDisplayComponent">
      <Footer />
      <BackToTop />
    </template>
    <template v-else>
      <MainToTop />
    </template>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { useRoute } from 'vue-router'
import { getWelcomeSay } from '@/utils/tool'
const router = useRoute()
const noDisplayComponent = computed(() => {
  return (
    router.name == 'about' ||
    router.name == 'wikiDetail' ||
    router.name == 'photo' ||
    router.name == 'process'
  )
})
let msg = getWelcomeSay()
ElNotification({
  offset: 60,
  title: '欢迎访问清风漫笔～',
  message: h('div', { style: 'font-weight: 600;' }, msg)
})
</script>
